<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3布局学习</title>
</head>
<style>
    @-webkit-keyframes fadein{
    0%{
    opacity:0;
    background-color:white;
    }
    100%{
    opacity:1;
    background-color:white;
    }
    }
    @-webkit-keyframes mycolor{
    0%{
    width:100px;
    height:100px;
    }
    100%{
    width:500px;
    height:500px;
    }
    }
    body{
        -webkit-animation-name:fadein;
        -webkit-animation-duration:5s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-iteration-count:1;
        display: -moz-box;
        display: -webkit-box;
        -moz-box-align:center;
        -webkit-box-align:center;
        -moz-box-pack:center;
        -webkit-box-pack:center;
    }
    div{
        background: url(images/bt-bg.png),url(images/en2.png);
        background-repeat:no-repeat, repeat-x;
    border: dashed 15px green;
    padding: 30px;
    color: #fff;}
    .div1{-moz-background-clip:border;border-radius:20px;
    -webkit-background-clip:border;background-size: 50% 50%;}
    .div2{-moz-background-clip:padding;-webkit-background-clip:padding;}
    .div3{-moz-background-origin:border;-webkit-background-origin:border;}
    .div4{-moz-background-origin:padding;-webkit-background-origin:padding;}
    .div5{-moz-background-origin:content;-webkit-background-origin:content;
    -moz-transform:translate(50px); -webkit-transform:translate(50px); -o-transform:translate(50px);}
    .div6{
        background-color: red;
        width: 500px;
        height: 500px;
        -webkit-animation-name:mycolor;
        -webkit-animation-duration:5s;
        -webkit-animation-timing-function:ease-out;
        resize: both;
        overflow: auto;
    }
</style>
<body>
<div class="div1">示例文字</div><br/>
<div class="div2">示例文字</div><br/>
<div class="div3">示例文字</div><br/>
<div class="div4">示例文字</div><br/>
<div class="div5">示例文字</div><br/>
<div class="div6">示例文字</div><br/>
</body>
</html>